/**
 * Author: ligj@mapbar.com
 * Create Time: 2018/01/09 16:41
 * Description:
 */
import Vue from 'vue'
import { MODAL_REMOVE_PAGE, MODAL_UPDATE_PAGE } from '../store/mutations'

Object.defineProperty(Vue.prototype, '$modal', {
    get () {
 return this._modal || {
        close () {
            throw new Error('当前页面不在模态页面模式')
        },
        set title (val) {
            throw new Error('当前页面不在模态页面模式')
        },
        get title () {
            throw new Error('当前页面不在模态页面模式')
        },
        get state () {
            throw new Error('当前页面不在模态页面模式')
        }
    }
}
})

Object.defineProperty(Vue.prototype, '$state', {
    get () { return this._state || this.$route }
})

Vue.mixin({
    props: {
        _modal: {
            type: Object,
            required: false
        },
        _state: {
            type: Object,
            required: false
        }
    }
})

/**
 *
 * 1、 读取 url参数时，使用vm.$state  替换 vm.$route
 * 2、 在modal内部关闭modal，调用vm.$modal.close()
 */
export default {
    data () {
        return {
        }
    },
    methods: {
        closeDialog (page) {
            this.$store.commit(MODAL_REMOVE_PAGE, page)
        }
    },
    computed: {
        openPages () {
            return this.$store.state.modal.pages
        }
    },
    render (h) {
        let $this = this
        return h(
            'div',
            this.openPages.map(page => {
                let modal = {
                    close: () => {
                        this.closeDialog(page)
                    },
                    set title (title) {
                        $this.$store.commit(MODAL_UPDATE_PAGE, {...page, title})
                        $this.$forceUpdate()
                    },
                    get title () {
                        return page.title
                    },
                    state: page.state
                }

                return h(
                    'el-dialog',
                    {
                        'class': {
                            'el-dialog-modal-page': true
                        },
                        props: {
                            'modal-append-to-body': true,
                            'append-to-body': true,
                            'close-on-click-modal': false,
                            'close-on-press-escape': false,
                            'visible': true,
                            'title': page.title,
                            'before-close': () => this.closeDialog(page),
                            'width': page.modalWidth || '800px'
                        }
                    },
                    [h(
                        page.component,
                        {
                            props: {
                                '_modal': modal,
                                '_state': modal.state,
                                ...page.state.params,
                                ...page.state.query
                            }
                        }
                    )]
                )
            })
        )
    }
}
